<template>
    <div class="zh-archives-edit">
        <nav-header>
            <template slot="menuBefore">
				<li><router-link to="/user/studystatus/archives-list" tag="a">档案管理</router-link></li>
				<li class="gap">&gt;</li>
			</template>
            <li>编辑</li>
        </nav-header>
        <div class="file-header-btn">
            <el-button type="primary" @click="linkTo">导入</el-button>
            <el-button type="primary" @click="exportSelect">导出</el-button>
        </div>

        <el-tabs v-model="activeName" type="card" @tab-click="changeTab" v-loading="loading.status" :element-loading-text="loading.txt">
            <el-tab-pane label="基础信息" name="first">
                <p class="tab-title">基础信息</p>
                <div class="file-base-photo" v-if="Object.keys(basicscList).length != 0">
                    <div class="presonPic">
                        <img :src="previewImgURL" class="avatar">
                        <div>
                            <span class="name-pinyin">
                            <template v-if="isRealName">
                                <span>
                                    <template v-for="item in basicscList.studystatus">
                                        <template v-if="item.id === 1">
                                            {{item.field_name}}：{{item.content.content ? item.content.content : basicscList.user_name}}
                                        </template>
                                    </template>
                                    <i class="el-icon-edit" v-if="!isDisabled" @click="editRealName"></i>
                                </span>
                            </template>
                            <template v-else>
                                <template v-for="(item, index) in basicscList.studystatus">
                                    <template v-if="item.id === 1">
                                        <el-input 
                                            :key="index"
                                            v-model="item.content.content" 
                                            @blur="changeRealName(item.content.content, basicscList.studystatus)"
                                            size="mini"
                                            @keyup.enter.native.stop="$event.target.blur"
                                            placeholder="请输入真实姓名">
                                            <template slot="append">
                                                <span @click="changeRealName(item.content.content, basicscList.studystatus)">确定</span>
                                            </template>
                                        </el-input>
                                    </template>
                                </template>
                            </template>

                            <template v-if="isPinyin">
                                <span>
                                    <template v-for="item in basicscList.studystatus">
                                        <template v-if="item.id === 2">
                                            {{item.field_name}}：{{item.content.content}}
                                            <!-- {{item.field_name}}：{{item.content.content 
                                                ? item.content.content 
                                                : changeRealName(basicscList.user_name, basicscList.studystatus)}} -->
                                        </template>
                                    </template>
                                    <i class="el-icon-edit" v-if="!isDisabled" @click="editSpell"></i>
                                </span>
                            </template>
                            <template v-else>
                                <template v-for="(item, index) in basicscList.studystatus">
                                    <template v-if="item.id === 2">
                                        <el-input 
                                            :key="index"
                                            v-model="item.content.content" 
                                            @blur="changeSpell()"
                                            size="mini"
                                            @keyup.enter.native.stop="$event.target.blur"
                                            placeholder="请输入姓名拼音">
                                            <template slot="append"><span @click="changeSpell()">确定</span></template>
                                        </el-input>
                                    </template>
                                </template>
                            </template>
                            </span>

                            <template v-if="!isDisabled">
                            <template v-for="(item, index) in basicscList.studystatus">
                                <uploader 
                                    :ref="'uploader' + (index + 1)"
                                    class="uploader-broadcast"
                                    v-if="item.id === 18"
                                    :key="index"
                                    :options="uploadOptions"
                                    :autoStart="true"
                                    :file-status-text="statusText"
                                    @files-submitted="fileSubmit"
                                    @file-removed="fileRemoved"
                                    @file-success="fileSuccess"
                                    @file-error="fileFail">
                                    <uploader-unsupport></uploader-unsupport>
                                    <uploader-btn :directory="false" :attrs="attrs" :single="true"><span @click="setPhoto(item, index + 1)">更换照片</span></uploader-btn>
                                </uploader>
                            </template>
                            </template>
                        </div>
                    </div>

                    <template v-for="(item, index) in basicscList.studystatus">
                        <div :key="index" v-if="item.id === 16">
                            <img v-if="hasClass" :src="'./../../../../static/image/user/file-' + statusList[item.content.content ? (item.content.content - 1) : 0] + '.png'">
                            <img v-else :src="'./../../../../static/image/user/file-' + statusList[6] + '.png'" />
                            <span>{{item.field_name}}</span>
                        </div>
                    </template>
                </div>

                <div class="file-base-info" v-if="Object.keys(basicscList).length != 0">
                    <div>
                        <span>账号：</span>
                        <el-input v-model="basicscList.user_number" disabled></el-input>
                    </div>
                    <div>
                        <span>用户名：</span>
                        <el-input v-model="basicscList.user_name" disabled></el-input>
                    </div>
                    <div>
                        <span>学校：</span>
                        <el-input v-model="basicscList.school_name" disabled></el-input>
                    </div>
                    <div>
                        <span>班级：</span>
                        <el-input v-model="basicscList.class.rename" disabled></el-input>
                    </div>
                    <div>
                        <span>班主任：</span>
                        <el-input v-model="basicscList.class.teacher_name" disabled></el-input>
                    </div>

                    <template v-for="(item, index) in basicscList.studystatus">
                        <div :key="index" v-if="item.is_up !== 1">
                            <span>{{item.field_name}}：</span>

                            <template v-if="item.type === 3">
                                <el-radio-group v-model="item.content.content" :disabled="isDisabled">
                                    <template v-for="(item2, index2) in item.field_option">
                                        <el-radio :label="(index2 + 1)" :key="index2">{{item2}}</el-radio>
                                    </template>
                                </el-radio-group>
                            </template>
                            <template v-else-if="item.type === 4">
                                <el-date-picker
                                    v-model="item.content.content"
                                    type="date"
                                    :disabled="isDisabled"
                                    placeholder="选择日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </template>
                            <template v-else-if="item.type === 5">
                                <el-select v-model="item.content.content" :placeholder="'请选择' + item.field_name" :disabled="isDisabled">
                                    <el-option
                                        v-for="(item1, inx1) in item.field_option"
                                        :key="inx1"
                                        :label="item1"
                                        :value="inx1 + 1">
                                    </el-option>
                                </el-select>
                            </template>
                            <template v-else>
                                <div v-if="item.id === 11">
                                    <el-input 
                                        :maxLength="11"
                                        :disabled="isDisabled"
                                        :class="errorTitle.telTip ? 'error-tips-info' : ''"
                                        @blur="setNumber(item)"
                                        v-model="item.content.content">
                                    </el-input>
                                    <div style="color: red; font-size: 12px;">{{errorTitle.telTip}}</div>
                                </div>
                                <div v-else-if="item.id === 12">
                                    <el-input 
                                        :maxLength="18"
                                        :disabled="isDisabled"
                                        :class="errorTitle.cardTip ? 'error-tips-info' : ''"
                                        @blur="validatedCard(item)"
                                        v-model="item.content.content">
                                    </el-input>
                                    <div style="color: red; font-size: 12px;">{{errorTitle.cardTip}}</div>
                                </div>
                                
                                <el-input 
                                    v-else
                                    :type="item.type === 6 ? 'textarea' : 'text'" 
                                    :rows="4"
                                    :disabled="isDisabled"
                                    v-model="item.content.content">
                                </el-input>
                            </template>
                        </div>
                    </template>
                </div>
                <div style="margin-top: 45px" v-if="!isDisabled">
                    <el-button type="primary" plain @click="goBack(1)">取消</el-button>
                    <el-button type="primary" @click="submitBasicsc">保存</el-button>
                </div>
            </el-tab-pane>

            <el-tab-pane label="家庭信息" name="second">
                <p class="tab-title">家庭信息</p>
                <div class="file-family-info">
                    <div class="file-family-info-title">
                        <template v-if="familyList.length > 0">
                        <template v-for="(item, inx) in familyList.filter(item => item.user_id !== 0)">
                            <div 
                                :class="(isFamilyBounded === true) && (familyBoundedIndex === inx) ? 'family-info-active' : ''" 
                                :key="item.id" 
                                @click="setStyleActive(inx, true)">
                                <span>家长{{inx + 1}}</span>
                            </div>
                        </template>

                        <template v-for="(item2, inx2) in familyList.filter(item2 => item2.user_id === 0)">
                            <div 
                                :class="(isFamilyUnbounded === false) && (familyUnboundedIndex === inx2) ? 'family-info-active' : ''" 
                                :key="item2.id" 
                                @click="setStyleActive(inx2, false)">
                                <span>成员{{inx2 + 1}}</span>
                                <i class="el-icon-remove" v-if="!isDisabled" @click.stop="removeMenber(inx2)"></i>
                            </div>
                        </template>
                        </template>
                        <span v-if="isNewMember" @click="newMember">添加新成员</span>
                    </div>

                    <div class="file-family-info-box" v-if="familyList.length > 0">
                        <div 
                            :class="(isFamilyBounded === true) && (familyBoundedIndex === index) ? 'family-info-active' : ''"
                            v-for="(item, index) in familyList.filter(item => item.user_id !== 0)" 
                            @click="setStyleActive(index, true)"
                            :key="item.id">
                            <div>
                                <span>家长{{index + 1}}账号：</span>
                                <el-input v-model="item.number" disabled></el-input>
                            </div>
                            <div>
                                <span>用户名：</span>
                                <el-input v-model="item.username" disabled></el-input>
                            </div>

                            <template v-for="(item1, inx1) in item.field">
                                <div :key="inx1">
                                    <span>{{item1.field_name}}：</span>

                                    <template v-if="item1.type === 3">
                                        <el-radio-group v-model="item1.content.content" :disabled="isDisabled">
                                            <template v-for="(item2, index2) in item1.field_option">
                                                <el-radio :label="(index2 + 1)" :key="index2">{{item2}}</el-radio>
                                            </template>
                                        </el-radio-group>
                                    </template>
                                    <template v-else>
                                        <template v-if="isDisabled">
                                            <el-input v-model="item1.content.content" disabled></el-input>
                                        </template>
                                        <template v-else>
                                            <div v-if="item1.id === 50">
                                                <el-input 
                                                    :maxLength="18"
                                                    :disabled="isDisabled"
                                                    :class="errorTitle2[index] ? 'error-tips-info' : ''"
                                                    @input="setNumber2(item1, index)"
                                                    v-model="item1.content.content">
                                                </el-input>
                                                <div style="color: red; font-size: 12px;">{{errorTitle2[index]}}</div>
                                            </div>

                                            <el-input 
                                                v-else
                                                v-model="item1.content.content" 
                                                :disabled="item1.id === 22 ? true : false">
                                            </el-input>
                                        </template>
                                    </template>
                                </div>
                            </template>
                        </div>

                        <div 
                            :class="(isFamilyUnbounded === false) && (familyUnboundedIndex === inx2) ? 'family-info-active' : ''" 
                            v-for="(item, inx2) in familyList.filter(item => item.user_id === 0)" 
                             @click="setStyleActive(inx2, false)"
                            :key="item.id">
                            <template v-for="(item1, inx1) in item.field">
                                <div :key="inx1">
                                    <span>{{item1.field_name}}：</span>

                                    <template v-if="item1.type === 3">
                                        <el-radio-group v-model="item1.content.content" :disabled="isDisabled">
                                            <template v-for="(item2, index2) in item1.field_option">
                                                <el-radio :label="(index2 + 1)" :key="index2">{{item2}}</el-radio>
                                            </template>
                                        </el-radio-group>
                                    </template>
                                    <template v-else>
                                        <div v-if="item1.id === 22">
                                            <el-input 
                                                :maxLength="11"
                                                :disabled="isDisabled"
                                                :class="errorTitle1[inx2] ? 'error-tips-info' : ''"
                                                @input="setNumber1(item1, inx2)"
                                                v-model="item1.content.content">
                                            </el-input>
                                            <div style="color: red; font-size: 12px;">{{errorTitle1[inx2]}}</div>
                                        </div>

                                        <div v-else-if="item1.id === 50">
                                            <el-input 
                                                :maxLength="18"
                                                :disabled="isDisabled"
                                                :class="errorTitle2[inx2] ? 'error-tips-info' : ''"
                                                @input="setNumber2(item1, inx2)"
                                                v-model="item1.content.content">
                                            </el-input>
                                            <div style="color: red; font-size: 12px;">{{errorTitle2[inx2]}}</div>
                                        </div>

                                        <el-input v-else v-model="item1.content.content" :disabled="isDisabled"></el-input>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>

                <template v-if="!isDisabled">
                    <div style="margin-top: 45px" v-if="familyList.length > 0">
                        <el-button type="primary" plain @click="goBack(2)">取消</el-button>
                        <el-button type="primary" @click="submitFamily">保存</el-button>
                    </div>
                </template>
            </el-tab-pane>

            <el-tab-pane label="来源信息" name="third">
                <p class="tab-title">来源信息</p>
                <div class="file-source-info">
                    <template v-for="(item, sindex) in sourceList">
                        <div :key="sindex" v-if="item.is_up !== 1">
                            <span>{{item.field_name}}：</span>

                            <template v-if="item.type === 4">
                                <el-date-picker
                                    v-model="item.content.content"
                                    type="date"
                                    :disabled="isDisabled"
                                    placeholder="选择日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </template>
                            <template v-else-if="item.type === 5">
                                <el-select v-model="item.content.content" :placeholder="'请选择' + item.field_name" :disabled="isDisabled">
                                    <el-option
                                        v-for="(item1, inx1) in item.field_option"
                                        :key="inx1"
                                        :label="item1"
                                        :value="inx1 + 1">
                                    </el-option>
                                </el-select>
                            </template>
                            <template v-else>
                                <el-input 
                                    v-if="item.id === 34"
                                    :type="item.type === 6 ? 'textarea' : 'text'" 
                                    :rows="4"
                                    :maxlength="200"
                                    show-word-limit
                                    :disabled="isDisabled"
                                    v-model="item.content.content">
                                </el-input>
                                <el-input 
                                    v-else
                                    :type="item.type === 6 ? 'textarea' : 'text'" 
                                    :rows="4"
                                    :disabled="isDisabled"
                                    v-model="item.content.content">
                                </el-input>
                            </template>
                        </div>
                    </template>
                </div>
                <div style="margin-top: 45px" v-if="!isDisabled">
                    <el-button type="primary" plain @click="goBack(3)">取消</el-button>
                    <el-button type="primary" @click="submitSource">保存</el-button>
                </div>
            </el-tab-pane>

            <el-tab-pane label="其他信息" name="fourth">
                <p class="tab-title">其他信息</p>
                <div class="file-other-info">
                    <template v-for="(item, oindex) in otherList">
                        <div :key="oindex" v-if="item.is_up !== 1">
                            <span>{{item.field_name}}：</span>

                            <template v-if="item.type === 3">
                                <el-radio-group v-model="item.content.content" @change="changeRadioVal(oindex)" :disabled="isDisabled">
                                    <template v-for="(item2, index2) in item.field_option">
                                        <el-radio :label="(index2 + 1)" :key="index2">{{item2}}</el-radio>
                                    </template>
                                </el-radio-group>
                            </template>
                            <template v-else>
                                <template v-if="isDisabled">
                                    <el-input v-model="item.content.content" disabled></el-input>
                                </template>
                                <template v-else>
                                    <el-input 
                                        v-model="item.content.content" 
                                        :maxLength="item.id === 49 ? 20 : undefined"
                                        :disabled="otherList[oindex -1].content.content == 1 ? false : true">
                                    </el-input>
                                </template>
                            </template>
                        </div>
                    </template>
                </div>
                <div style="margin-top: 45px" v-if="!isDisabled">
                    <el-button type="primary" plain @click="goBack(4)">取消</el-button>
                    <el-button type="primary" @click="submitOther">保存</el-button>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import {uploaderFileFail} from './../../../tools/tool';
import defaultImg from './../../../../static/image/user/studystatus/default.png';

export default {
    data() {
        return {
            uploadOrNot: false, //是否已经上传
            selectFileOrNot: false, //是否选中文件
            selectFileShow: true, //是否显示选择文件按钮
            isRealName: true, // 是否编辑真实姓名
            isPinyin: true, // 是否编辑姓名拼音
            uploadRetryTimes: 100, //文件最大重传次数
            familyBindLen: 0, // 家庭信息绑定账号的数量
            previewImgURL: defaultImg,
            activeName: "first",
            realName: '', // 填写真实姓名
            user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')), /*判断当前登录会员是否教育局 */
            imageType: ['image/jpeg', 'image/bmp', 'image/png'], // 上传图片格式
            statusList: ['normal', 'warning', 'warning', 'warning', 'warning', 'graduated', 'other'], // 状态列表 0正常 || 1异动 || 5已毕业
            attrs: { accept: ["image/*"] },
            loading:{
                status: false,
                txt: '获取数据...',
            },
            uploadOptions: {
                target: this.BASE_URL + "/api/resource/res_upload",
                testChunks: false,
                headers: { Authorization: `Bearer ` + this.$g.access_token }
            },
            statusText: {
                success: "上传成功",
                error: "上传出错",
                uploading: "正在上传...",
                paused: "暂停",
                waiting: "等待上传"
            },
            uploadInfo: {
                file_name: '',
                file_path: '',
                file_size: 0
            },
            basicscList: {}, // 基础信息
            _basicscList: {}, // 默认基础信息
            familyList: [], // 家庭信息
            _familyList: {}, // 默认家庭信息
            sourceList: {}, // 来源信息
            _sourceList: {}, // 默认来源信息
            otherList: {}, // 其他信息
            _otherList: {}, // 默认其他信息
            photoItem: null, // 图片上传的对象
            photoID: '', // 图片上传组件 ref
            isDisabled: false, // 教育局 -- 页面不可编辑
            isFamilyBounded: true, // 家庭信息 -- 绑定
            familyBoundedIndex: 0, // 家庭信息 -- 绑定下标
            isFamilyUnbounded: null, // 家庭信息 -- 未绑定
            familyUnboundedIndex: -1, // 家庭信息 -- 未绑定下标
            errorTitle: { // 错误提示
                telTip: '',
                cardTip: '',
            },
            errorTitle1: [], // 电话错误提示
            errorTitle2: [], // 身份证错误提示
            hasClass: true,
        };
    },
    created() {
        for (let i=1; i<=4; i++) {
            this.getList(i);
        }

        if (this.$route.query.level === 'detail' && this.user_level === 0) {
            this.isDisabled = true;
        }
    },
    computed: {
        isNewMember() {
            if (!this.isDisabled) {
                if (this.familyList.filter(item2 => item2.user_id === 0).length < 6) {
                    return true;
                }
            }

            return false;
        },
    },
    methods: {
        /**
         * 设置样式高亮
         * @param {Number} index 对象下标
         * @param {Number} key 是否绑定
         */
        setStyleActive(index, key) {
            if (key === true) {
                this.isFamilyBounded = key;
                this.familyBoundedIndex = index;
                this.isFamilyUnbounded = null;
                this.familyUnboundedIndex = -1;
            } else {
                this.isFamilyBounded = null;
                this.familyBoundedIndex = -1;
                this.isFamilyUnbounded = key;
                this.familyUnboundedIndex = index;
            }
        },
        /**
         * 根据 radio 的值清空数据
         * @param {Number} index 对象的下标
         */
        changeRadioVal(index) {
            if (this.otherList[index + 1] && this.otherList[index + 1].type === 1 && this.otherList[index].content.content == 2) {
                this.otherList[index + 1].content.content = null;
            }
        },
        /**
         * 验证身份证
         * @param {Object} obj 当前对象
         */
        validatedCard(obj) {
            if (is_empty(obj.content.content)) {
                this.errorTitle.cardTip = '';
                return false;
            }

            let _temp = deep_clone(obj.content.content) + '';
            //身份证正则表达式(15位)
            let isIDCard1 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
            //身份证正则表达式(18位)
            let isIDCard2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            // 身份证正则合并
            let isIDCard3 = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;

            
            if (!isIDCard2.test(_temp)) {
                this.errorTitle.cardTip = '请输入正确的身份证号';
            } else {
                this.errorTitle.cardTip = '';
            }
        },
        /**
         * 验证身份证
         * @param {Object} obj 当前对象
         * @param {Number} inx 对象下标
         */
        setNumber2(obj, inx) {
            if (is_empty(obj.content.content)) {
                this.errorTitle2[inx] = '';
                return false;
            }

            let _temp = deep_clone(obj.content.content) + '';
            //身份证正则表达式(15位)
            let isIDCard1 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
            //身份证正则表达式(18位)
            let isIDCard2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            // 身份证正则合并
            let isIDCard3 = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;

            
            if (!isIDCard2.test(_temp)) {
                this.errorTitle2[inx] = '请输入正确的身份证号';
            } else {
                this.errorTitle2[inx] = '';
            }
        },
        /**
         * 输入框设置长度
         * @param {Object} obj 当前对象
         */
        setNumber(obj) {
            if (is_empty(obj.content.content)) {
                this.errorTitle.telTip = '';
                return false;
            }

            let _temp = deep_clone(obj.content.content) + '';
            let reg1 = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;

            if (!reg1.test(_temp)) {
                this.errorTitle.telTip = '请输入正确的联系方式';
            } else {
                this.errorTitle.telTip = '';
            }
        },
        /**
         * 输入框设置长度
         * @param {Object} obj 当前对象
         * @param {Number} inx 对象下标
         */
        setNumber1(obj, inx) {
            if (is_empty(obj.content.content)) {
                this.errorTitle1[inx] = '';
                return false;
            }

            let _temp = deep_clone(obj.content.content) + '';
            let reg1 = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;

            if (!reg1.test(_temp)) {
                this.errorTitle1[inx] = '请输入正确的联系方式';
            } else {
                this.errorTitle1[inx] = '';
            }
        },
        /**
         * 设置上传插件的ref和当前对象
         * @param {Object} item 当前点击的对象
         * @param {Number} index 当前点击的index
         */
        setPhoto(item, index) {
            this.photoItem = item;
            this.photoID = 'uploader' + index;
        },
        /**
         * 获取信息
         * @param {Number} key 1基础信息 || 2家庭信息 || 3来源信息 || 4其他信息
         */
        getList(key) {
            this.loading.status = true;
            
            let success = (res => {
                this.loading.status =  false;
                
                switch(key) {
                    case 1:
                        this.basicscList = deep_clone(res.data);
                        this._basicscList = deep_clone(res.data);
                        
                        if (is_empty(res.data.class.id)) {
                            this.hasClass = false;
                        }

                        if (!is_empty(res.data.studystatus)) {
                            res.data.studystatus.forEach(item => {
                                if (item.id === 18) {
                                    if (!is_empty(item.content.content)) {
                                        this.previewImgURL = this.BASE_URL + deep_clone(item.content.content);
                                    }
                                }
                            })
                        }
                        break;
                    case 2:
                        this.familyList = deep_clone(res.data);
                        this._familyList = deep_clone(res.data);
                        this.familyBindLen = this.familyList.filter(item => item.user_id !== 0).length;
                        
                        if (is_empty(this.familyList.filter(item => item.user_id !== 0))) {
                            this.familyBoundedIndex = -1;
                            this.familyUnboundedIndex = 0;
                            this.isFamilyBounded = null;
                            this.isFamilyUnbounded = false;
                        }
                        break;
                    case 3:
                        this.sourceList = deep_clone(res.data);
                        this._sourceList = deep_clone(res.data);
                        break;
                    case 4:
                        this.otherList = deep_clone(res.data);
                        this._otherList = deep_clone(res.data);
                        break;
                }
            });
            let params = {
                user_id: this.$route.params.id,
                from_type: key,
                // get_end_class: 1
            }
            
            this.$ajax.get('api/studystatus/studystatus_info', {params, func: {success: success}})
        },
        /**
         * 编辑真实姓名
         */
        editRealName() {
            this.isPinyin = true;
            this.isRealName = false;
        },
        /**
         * 编辑姓名拼音
         */
        editSpell() {
            this.isPinyin = false;
            this.isRealName = true;
        },
        /**
         * 修改真实姓名
         * @param {String} str 真实姓名
         * @param {Object} obj 基础信息对象
         */
        changeRealName(str, obj) {
            // if (str) {
            //     obj.forEach(item => {
            //         if (item.id === 2) {
            //             item.content.content = this.$pinyin(str, {filterChinese: true, noTone: true});
            //         }
            //     })
            // }

            this.isRealName = true;
        },
        /**
         * 修改姓名拼音
         */
        changeSpell() {
            this.isPinyin = true;
        },
        /**
         * 删除新增成员
         * @param {Number} inx familyList 对象下标
         */
        removeMenber(inx) {
            let yes = (res => {
                this.familyList.splice(inx + this.familyBindLen, 1);
            })
            let cancel = (res => {})
            
            this.e_confirm({yes: yes, cancel: cancel, txt: '是否删除当前家庭成员模块？'});
        },
        /**
         * 家庭信息 -- 添加新成员
         */
        newMember() {
            this.familyList.push({
                number: '',
                user_id: 0,
                username: '',
                field: [
                   {id: 19, field_name: '真实姓名', field_option: '', type: 1, content: {content: null}},
                   {id: 20, field_name: '关系', field_option: '', type: 1, content: {content: null}},
                   {id: 21, field_name: '是否监护人', field_option :['是', '否'], 'type': 3, content: {content: null}},
                   {id: 22, field_name: '电话', field_option: '', type: 1, content: {content: null}},
                   {id: 23, field_name: '职务', field_option: '', type: 1, content: {content: null}},
                   {id: 24, field_name: '单位地址', field_option: '', type: 1, content: {content: null}},
                   {id: 25, field_name: '国籍', field_option: '', type: 1, content: {content: null}},
                   {id: 26, field_name: '民族', field_option: '', type: 1, content: {content: null}},
                   {id: 27, field_name: '籍贯', field_option: '', type: 1, content: {content: null}},
                   {id: 28, field_name: '户籍所在地', field_option: '', type: 1, content: {content: null}},
                   {id: 50, field_name: '身份证号', field_option: '', type: 1, content: {content: null}}
                ] 
            })
        },
        /**
         * 保存基础信息
         */
        submitBasicsc() {
            if (this.errorTitle.telTip) {
                this.$message.error('请输入正确的电话格式');
                return false;
            }

            if (this.errorTitle.cardTip) {
                this.$message.error('请输入正确的身份证号');
                return false;
            }

            this.loading.status =  true;
            this.loading.txt =  '正在保存...';

            let param = {arr: []};
            param.arr['user_id'] = this.$route.params.id;
            param.arr['basic'] = [];

            this.basicscList.studystatus.forEach(item => {
                let _arr = {
                    field_id: item.id,
                    content: item.content.content
                }

                param.arr['basic'].push(_arr);
            })

            const success = (res => {
                setTimeout(() => {
                    this.loading.status =  false;
                    this.$message.success(res.msg);
                }, 300);
            })
            const fail = (res => {
                setTimeout(() => {
                    this.loading.status =  false;
                }, 300);
            })

            this.$ajax.post("api/studystatus/studystatus_operation", param, {func: {success: success, fail: fail}});
        },
        /**
         * 保存家庭信息
         */
        submitFamily() {
            let len1 = this.errorTitle1.length;

            if (len1 > 0) {
                for (let i=0; i<len1; i++) {
                    if (this.errorTitle1[i]) {
                        this.$message.error('请输入正确的电话格式');
                        return false;
                    }
                }
            }

            let len2 = this.errorTitle2.length;
            if (len2 > 0) {
                for (let i=0; i<len2; i++) {
                    if (this.errorTitle2[i]) {
                        this.$message.error('请输入正确的身份证号');
                        return false;
                    }
                }
            }

            this.loading.status =  true;
            this.loading.txt =  '正在保存...';

            let param = {arr: []};
            param.arr['user_id'] = this.$route.params.id;
            param.arr['family'] = [];

            this.familyList.forEach((item, index) => {
                param.arr['family'][index] = [];
                param.arr['family'][index]['family_id'] = item.user_id;

                item.field.forEach(item1 => {
                    param.arr['family'][index].push({
                        field_id: item1.id,
                        content: item1.content.content
                    })
                })
            })

            const success = (res => {
                setTimeout(() => {
                    this.loading.status =  false;
                    this.$message.success(res.msg);
                }, 300);
            })
            const fail = (res => {
                setTimeout(() => {
                    this.loading.status =  false;
                }, 300);
            })

            this.$ajax.post("api/studystatus/studystatus_operation", param, {func: {success: success, fail: fail}});
        },
        /**
         * 保存来源信息
         */
        submitSource() {
            this.loading.status =  true;
            this.loading.txt =  '正在保存...';
            let param = {arr: []};
            param.arr['user_id'] = this.$route.params.id;
            param.arr['cource'] = [];

            this.sourceList.forEach(item => {
                let _arr = {
                    field_id: item.id,
                    content: item.content.content
                }

                param.arr['cource'].push(_arr);
            })

            const success = (res => {
                setTimeout(() => {
                    this.loading.status =  false;
                    this.$message.success(res.msg);
                }, 300);
            })
            const fail = (res => {
                setTimeout(() => {
                    this.loading.status =  false;
                }, 300);
            })

            this.$ajax.post("api/studystatus/studystatus_operation", param, {func: {success: success, fail: fail}});
        },
        /**
         * 保存其他信息
         */
        submitOther() {
            this.loading.status =  true;
            this.loading.txt =  '正在保存...';
            let param = {arr: []};
            param.arr['user_id'] = this.$route.params.id;
            param.arr['other'] = [];

            this.otherList.forEach(item => {
                let _arr = {
                    field_id: item.id,
                    content: item.content.content
                }

                param.arr['other'].push(_arr);
            })

            const success = (res => {
                setTimeout(() => {
                    this.loading.status =  false;
                    this.$message.success(res.msg);
                }, 300);
            })
            const fail = (res => {
                setTimeout(() => {
                    this.loading.status =  false;
                }, 300);
            })

            this.$ajax.post("api/studystatus/studystatus_operation", param, {func: {success: success, fail: fail}});
        },
        /**
         * 跳到导入页面
         */
        linkTo() {
            this.$router.push("/user/studystatus/studystatus-import")                        
        },
        /**
         * 切换tab标签页
         */
        changeTab(tab, event) {},
        /**
         * 导出档案信息
         */
        exportSelect() {
            this.export_excel(
                "api/studystatus/download_student_status",
                {id: this.$route.params.id},
                "档案管理编辑"
            );
        },
        /**
         * 判断两个对象是否相等
         * @param {Object} a 默认对象 
         * @param {Object} b 要比较的对象
         */
        isObjectValueEqual(a, b) {
            let aProps = Object.getOwnPropertyNames(a);
            let bProps = Object.getOwnPropertyNames(b);
        
            if (aProps.length != bProps.length) {
                return false;
            }

            for (let i=0; i<aProps.length; i++) {
                let propName = aProps[i];
                let propA = a[propName];
                let propB = b[propName];

                // propA 和 propB 都为空或 null 的时候，默认相等
                if ((propA === '' || propA === null) && (propB === '' || propB === null)) {
                    continue;
                } else {
                    if (propA != propB) {
                        if (Object.prototype.toString.call(propA) == '[object Object]' || Object.prototype.toString.call(propA) == '[object Array]') {
                            if (this.isObjectValueEqual(propA, propB)) {
                                continue
                            } else {
                                return false;
                            }
                        } else {
                            return false;
                        }
                    }
                }
            }

            return true;
        },
        /**
         * 返回上一页
         * @param {Number} key 相对应模块
         */
        goBack(key) {
            let flag = false;

            switch(key) {
                case 1:
                    flag = this.isObjectValueEqual(this._basicscList, deep_clone(this.basicscList));
                    break;
                case 2:
                    flag = this.isObjectValueEqual(this._familyList, deep_clone(this.familyList));
                    break;
                case 3:
                    flag = this.isObjectValueEqual(this._sourceList, deep_clone(this.sourceList));
                    break;
                case 4:
                    flag = this.isObjectValueEqual(this._otherList, deep_clone(this.otherList));
                    break;
            }

            if (!flag) {
                let yes = (res => {
                    this.$router.go(-1);
                })
                let cancel = (res => {})
                    
                this.e_confirm({yes: yes, cancel: cancel, txt: '你有数据未保存，是否确定取消？'});
            } else {
                this.$router.go(-1);
            }
        },
        /**
         * 更换头像成功
         */
        fileSuccess(rootFile, file, message, chunk) {
            let mess = eval("(" + message + ")");
            mess = handleResponseData( mess );

            if (parseInt(mess.data.status) === 1) {
                this.uploadOrNot = true;
                // this.uploadInfo.file_name = mess.data.file_name;
                // this.uploadInfo.file_path = mess.data.file_path;
                // this.uploadInfo.post_fix = mess.data.post_fix;
                this.photoItem.content.content = mess.data.file_path;

            }
        },
        /**
         * 更换头像失败
         */
        fileFail(rootFile, file, message, chunk) {
            uploaderFileFail(this, this.$refs[this.photoID][0].uploader, file, message);
        },
        /**
         * 过滤文件格式
         */
        fileSubmit(files, fileList, event) {
            for (let i=0; i<fileList.length; i++) {
                let file_type = fileList[i].fileType.toLocaleLowerCase();

                if(!this.imageType.includes(file_type)){
                    this.$message.warning('只允许上传 bmp/jpg/jpeg/png 格式图片');
                    this.$refs[this.photoID][0].uploader.removeFile(fileList[i]);
                } else if (fileList[i].size > 10240000) {
                    this.$message.warning("只允许上传10M以内的文件");
                    this.$refs[this.photoID][0].uploader.removeFile(fileList[i]);
                } else {
                    if (this.$refs[this.photoID][0].uploader.fileList.length > 1) {
                        //删除第一张图片
                        this.$refs[this.photoID][0].uploader.removeFile(
                            this.$refs[this.photoID][0].uploader.fileList[0]
                        );
                    }

                    this.previewImgURL = window.URL.createObjectURL(fileList[i].file);
                    this.uploadInfo.file_size = fileList[i].size;
                    this.selectFileOrNot = true;
                    this.selectFileShow = false;
                }
            }
        },
        /**
         * 移除文件
         */
        fileRemoved(file) {
            this.selectFileOrNot = false;
            this.selectFileShow = true;
        }
    }
};
</script>
<style lang="scss">
.zh-archives-edit {
    .error-tips-info >input {
        border: 1px solid red !important;
    }

    .file-header-btn {
        position: absolute;
        top: 75px;
        right: 40px;
        z-index: 999;

        button {
            padding: 8px 19px;
            font-size: 14px;
        }
    }

    .tab-title:before {
        content: '';
        display: inline-block;
        margin-right: 8px;
        margin-bottom: -3px;
        width: 5px;
        height: 16px;
        background: #33bbbb;
        border-radius: 5px;
    }

    .tab-title {
        font-weight: bold;
    }

    .tab-title:after {
        content: '';
        position: absolute;
        top: 24px;
        left: 96px;
        width: calc(100% - 96px);
        height: 1px;
        border-top: 1px dashed #ccc;
    }

    .file-base-photo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 35px 0 20px;
        margin: 30px 0 20px;
        width: 100%;
        height: 120px;
        background-image: linear-gradient(-180deg, #87d1fe 0%, #aedaff 100%);
        box-sizing: border-box;

        .presonPic {
            display: flex;
            align-items: center;

            >img {
                margin-right: 15px;
                width: 75px;
                height: 75px;
                border: 2px solid rgba(255,255,255,0.50);
                object-fit: cover;
                border-radius: 100px;
                box-sizing: border-box;
                object-fit: cover;
            }

            >div {
                .name-pinyin {
                    >span {
                        display: inline-block;
                        height: 30px;
                        line-height: 30px;

                        i {
                            margin-left: 5px;
                            cursor: pointer;
                        }

                        span {
                            font-size: 12px;
                            color: #4C769C;
                        }
                    }

                    >span:last-child {
                        margin-left: 40px;
                    }

                    >div {
                        width: 200px;
                    }

                    >div:last-child {
                        margin-left: 40px;
                    }
                }

                .el-input {
                    margin-top: 0;

                    .el-input-group__append {
                        padding: 0;
                        
                        span {
                            padding: 6px 6px;
                            cursor: pointer;
                        }
                    }
                }

                >div {
                    margin-top: 12px;

                    .uploader-btn {
                        padding: 7px 12px;
                        border-radius: 4px;
                        font-size: 12px;
                        color: #fff;
                        background: #348EFC;
                        border: none;
                    }
                }
            }
        }

        >div:last-child {
            display: flex;
            align-items: center;
            flex-direction: column;

            img {
                width: 58px;
                height: 68px;
                object-fit: contain;
            }

            span {
                margin-top: 5px;
                padding: 2px 11px;
                font-size: 12px;
                color: #FFFFFF;
                background: #699AE4;
                border-radius: 100px 20px 100px 20px;
            }
        }
    }

    .file-base-info {
        display: flex;
        flex-wrap: wrap;

        > div {
            display: flex;
            align-items: baseline;
            margin-bottom: 20px;
            width: 50%;

            > span {
                width: 160px;
                font-size: 14px;
                color: #333333;
            }

            > div {
                width: 320px;
            }
        }
    }

    .file-family-info {
        .family-info-active {
            margin-top: -1px;
            margin-left: -1px;
            margin-bottom: -1px;
            border: 1px solid #4B9BFC !important;
        }

        .file-family-info-title {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            margin-top: 30px;
            min-height: 40px;
            padding-right: 80px;
            border: 1px solid #DDDDDD;
            box-sizing: border-box;

            >span {
                position: absolute;
                right: 10px;
                font-size: 14px;
                color: #348EFC;
                line-height: 40px;
                cursor: pointer;
            }

            >div {
                display: flex;
                justify-content: space-around;
                align-items: center;
                width: 120px;
                color: #6E6E6E;
                border-right: 1px solid #DDDDDD;
                box-sizing: border-box;
                height: 40px;
                border-bottom: 1px solid #DDDDDD;

                i {
                    font-size: 15px;
                    color: red;
                    cursor: pointer;
                }
            }
        }

        .file-family-info-box {
            display: flex;
            flex-wrap: wrap;

            >div {
                margin-top: 10px;
                padding: 27px 20px;
                width: calc(50% - 10px);
                max-width: 680px;
                background: #F6F8FA;
                border: 1px solid transparent;
                box-sizing: border-box;

                >div {
                    display: flex;
                    align-items: baseline;
                    margin-bottom: 20px;

                    > span {
                        display: inline-block;
                        width: 120px;
                        font-size: 14px;
                        color: #333333;
                        vertical-align: top;
                    }

                    > div {
                        flex: 1;
                        max-width: 490px;
                    }
                }
            }

            >div:nth-child(2n + 1) {
                margin-right: 10px;
            }

            >div:nth-child(2n) {
                margin-left: 10px;
            }
        }
    }

    .file-source-info,
    .file-other-info {
        margin-top: 38px;

        >div {
            display: flex;
            align-items: baseline;
            margin-bottom: 20px;

            > span {
                display: inline-block;
                width: 150px;
                font-size: 14px;
                color: #333333;
                vertical-align: top;
            }

            > div {
                width: 490px;
            }
        }
    }
}
</style>